<template>
  <div class="navPage">
    <div class="nav_box">
      <div
        class="back"
        @click="$router.back(-1)"
        v-if="show_back_btn"
      >
        返回
      </div>
      <div
        class="logo_box"
        @click="$router.push('/')"
      >
        <img
          src="../../../static/icon/logo.png"
          alt=""
        >
      </div>
      <div
        class="menu_btn"
        @click="show_nav()"
      ></div>
    </div>
    <div class="nav_btn">
      <div v-transfer-dom>
        <popup
          v-model="show_right_nav"
          position="right"
        >
          <div style="width:120px;padding-top:90px">
            <ul class="nav_s1">
              <li
                v-for="item in nav_list"
                @click="nav_link(item)"
              >{{item.name}}</li>
            </ul>
          </div>
        </popup>
      </div>
    </div>
    <div style="height:66px;width:100%;"></div>
  </div>
</template>
<script>
import { Popup, TransferDom } from "vux";
export default {
  directives: {
    TransferDom
  },
  components: {
    Popup
  },
  methods: {
    show_nav() {
      this.show_right_nav = !this.show_right_nav;
    },
    nav_link(item) {
      this.$router.push(item.url);
      this.show_right_nav = false;
    }
  },
  watch: {
    $route(to, from) {
      this.show_back_btn = this.$store.state.show_back_btn;
    }
  },
  data() {
    return {
      show_right_nav: false,
      show_back_btn: false,
      nav_list: [
        {
          name: "首页",
          url: "/"
        },
        {
          name: "八字起名",
          url: "/bz_namimg"
        },
        {
          name: "测算八字",
          url: "/bz_namimg"
        },
        {
          name: "名字测试",
          url: "/bz_namimg"
        },
        {
          name: "定字起名",
          url: "/bz_namimg"
        }
      ]
    };
  }
};
</script>
<style scoped>
.logo_box {
  width: 170px;
  height: 40px;
  overflow: hidden;
  margin: auto;
  padding: 10px;
}
.back {
  background-image: url("../../../static/svg/back.svg");
  background-size: 58%;
  position: absolute;
  background-position: -6px 0px;
  background-repeat: no-repeat;
  left: 0;
  color: #666;
  height: 50px;
  top: 5px;
  width: 50px;
  line-height: 50px;
  padding-left: 32px;
}
.back:active {
  background-color: #eee;
}
.nav_s1 li {
  height: 36px;
  line-height: 36px;
  text-align: center;
  color: #333;
}
.logo_box * {
  width: 100%;
  display: block;
}
.nav_box {
  height: 56px;
  width: 100%;
  background-image: url('../../../static/icon/bg_1.png');
  position: fixed;
  background-color: #fff;
  top: 0;
  left: 0;
  z-index: 9999;
}
.menu_btn:active {
  background-color: #e7930f;
}
.menu_btn {
  width: 55px;
  height: 55px;
  background-color: #fbb03b;
  position: absolute;
  right: 0;
  top: 0;
  background-image: url("../../../static/svg/menu_btnm.svg");
  background-repeat: no-repeat;
  background-size: 50%;
  background-position: 14px;
}
</style>
